<style lang="scss" scoped>
@import "../../css/list.scss";
.revise {
  color: #0082fc;
}
.customer-info {
  padding-bottom: 0.7rem;
  main {
    .tit {
      width: 0.7rem;
    }
    .customer_data {
      li {
        height: 0.28rem;
        line-height: 0.28rem;
      }
    }
    .customer_notes {
      padding: 0.08rem 0.15rem;
      li {
        padding: 0.08rem 0;
        &:last-child {
          padding-bottom: 0;
          &::after {
            color: #fff;
            border-bottom: #fff;
          }
        }
        & > div {
          padding-bottom: 0.1rem;
          .code {
            width: 1.5rem;
            height: 1.5rem;
            // margin-left: -.2rem;
          }
        }
      }
    }
  }
  footer {
    width: 100%;
    bottom: 0;
    & > div {
      padding: 0.1rem 0.15rem;
      .btn {
        height: 0.5rem;
      }
    }
  }
}
.pop {
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  .box {
    width: 65%;
    .input {
      padding: 0.1rem 0.3rem 0.2rem;
      input {
        padding: 0 0.08rem;
        height: 0.32rem;
        border: 1px solid #ececec;
        outline-color: invert;
        outline-style: none;
        outline-width: 0px;
        text-shadow: none;
        -webkit-appearance: none;
        -webkit-user-select: text;
        outline-color: transparent;
        box-shadow: none;
      }
    }
    .btns {
      & > div.active {
        background: #ececec;
      }
    }
  }
}
</style>


<template>
  <div class="customer-info full flex-row">
    <ul class="customer_list bgfff">
      <li class="customer_it flex-col border-t">
        <div class="customer_img padding-r20">
          <div class="img-bg box-center font-18 cfff">{{clientInfo.clientName | getClientName}}</div>
        </div>
        <div class="customer_info box1 flex-col flex-middle padding-tb5">
          <div class="box1">
            <span class="font-w font-16">{{clientInfo.clientName}}-{{clientInfo.clientPhone}}</span>
            <span class="cred f-r">{{clientInfo.matchStatus | getMatchStatus}}</span>
          </div>
          <!-- <div class="tags">
                        <span>已匹配</span>
                        <span>已打电话</span>
                        <span>已报备</span>
                    </div> -->
        </div>
      </li>
    </ul>
    <main class="bgfff box1 margin-t10">
      <ul class="customer_data border-b padding-tb10">
        <li class="flex-col padding-lr15">
          <span class="box1">客户信息</span>
          <div class="c82 flex-col flex-middle" @click="toRouter('customer_data')">查看详情
            <i class="iconfont icon-jiantou"></i>
          </div>
        </li>
        <li class="flex-col padding-lr15">
          <span class="tit">姓名</span>
          <div>{{clientInfo.clientName}}</div>
        </li>
        <li class="flex-col padding-lr15">
          <span class="tit">电话</span>
          <div>{{clientInfo.clientPhone}}</div>
        </li>
        <li class="flex-col padding-lr15">
          <span class="tit">来源区域</span>
          <div>{{clientInfo.provinceName}}{{clientInfo.cityName}}{{clientInfo.districtName}}</div>
        </li>
      </ul>
      <ul class="customer_notes border-b" v-show="statusList.length">
        <li>
          <span class="box1">报备信息</span>
        </li>
        <li class="border-b" v-for="(it,i) in statusList" :key="i" v-if="it.houseCode">
          <div class="flex-col">
            <span class="tit">楼盘</span>
            <div class="cred box1">
              {{it.houseName}}
            </div>
          </div>
          <!-- <div class="flex-col">
            <span class="tit">时间</span>
            <div>{{it.updateTime}}</div>
          </div> -->

          <div class="flex-col">
            <span class="tit">看房状态</span>
            <div class="box1 cred">{{it.lookHouseStatus | getLookStatus}}</div>
            <div class="padding-l10 revise" v-if="it.lookHouseStatus === 3" @click="setShowPicker(it.userAndClientCode)">修改状态</div>
            <div class="padding-l10 revise" v-if="it.lookHouseStatus === 2" @click="setShowPicker(it.userAndClientCode,1)">修改时间</div>
          </div>
          <div class="flex-col">
            <span class="tit">看房时间</span>
            <div>{{it.lookTime}}</div>
          </div>
          <div class="flex-col" v-if="it.lookHouseStatus === 5">
            <span class="tit">成交价</span>
            <div>￥{{it.price}}</div>
          </div>
          <div class="flex-col border" v-if="it.qrCode != 0">
            <span class="tit">二维码</span>
            <div class="code img-bg">
              <img :src="it.qrImg" class="w100" alt="">
            </div>
          </div>
        </li>
        <!-- <li class="border-b">
                    <div class="flex-col">
                        <span class="tit">楼盘</span>
                        <div class="cred">中兴铁路水晶银坊</div>
                    </div>
                    <div class="flex-col">
                        <span class="tit">时间</span>
                        <div>2018-1-10</div>
                    </div>
                    <div class="flex-col border">
                        <span class="tit">二维码</span>
                        <div class="code img-bg"></div>
                    </div>
                </li> -->
      </ul>
      <div class="houses_list">
        <div class="sub-tit">匹配房源</div>
        <ul class="flex-parent padding-15">
          <li v-for="(it,i) in houseList" :key="i" @click="toHouseInfo(it.housesCode)">
            <div class="houses_img img-bg bor-r" :style="{backgroundImage:`url(${it.housesImgurl})`}"></div>
            <div class="houses_name">{{it.housesName}}</div>
            <div class="c82 font-10 padding-b15">佣金奖励 房贷*0.5%</div>
          </li>
        </ul>
        <div v-show="empty">
          <div class="empty c82 box-center">
            暂无数据
          </div>
        </div>
      </div>
    </main>
    <!-- <footer class="bgfff box-sizing position-f">
            <div class="border-t box">
                <div class="bgred cfff bor-r btn box-center">确认已打电话</div>
            </div>
        </footer> -->

    <!-- 选择修改报备 begin -->
    <div class="make_slots position-f flex-row full" v-show="showPicker">
      <div class="box1"></div>
      <transition-group enter-active-class="bounceInUp" class="make_box w100" leave-active-class="bounceInDown">
        <div class="box-space tit bgfff w100 animated" v-show="showPicker" :key="1">
          <div class="padding-lr15" @click="showPicker = false">取消</div>
          <div class="padding-lr15" @click="reviseLookStatusTime">确定</div>
        </div>
        <mt-picker :slots="slots" v-show="showPicker" :key="2" class="picker w100 animated" @change="onValuesChange"></mt-picker>
      </transition-group>
    </div>
    <!-- 选择修改报备 end -->

    <!-- 报备预约时间选择 begin -->
    <mt-datetime-picker ref="picker" v-model="pickerValue" year-format="{value}年" month-format="{value}月" date-format="{value}日" hour-format="{value}时" minute-format="{value}分" :startDate="startDate" @confirm="reviseLookStatus(1)"></mt-datetime-picker>
    <!-- 报备预约时间选择 end -->

    <div class="pop position-f full box-center" v-show="pop" @click="pop=false">
      <div class="box bgfff bor-r5">
        <div class="padding-20 text-c">请输入成交价</div>
        <div class="input border-b box-sizing"  @click.stop>
          <input type="number" v-model="popNumber" onkeyup="value=value.replace(/[^\d]/g,'')" class="full" placeholder="">
        </div>
        <div class="btns flex-col">
          <div class="box1 box-center padding-tb15 border-r btn" @click="pop=false">取消</div>
          <div class="box1 box-center padding-tb15 btn" @click.stop="confirmPop">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode"; // 二维码
import { Picker, DatetimePicker } from "mint-ui";
export default {
  name: "customer_info",
  data() {
    return {
      pop:false,
      popNumber:null,
      clientInfo: {}, //客户详情
      statusList: [], // 客户看房状态列表
      houseList: [], // 附近房源列表
      empty: true, // 附近房源是否为空
      showPicker: false, // 修改报备标识状态
      lookHouseStatus: 0, //修改报备用户的看房状态
      userAndClientCode: "", //修改报备用户的code
      pickerValue: null, //修改报备预约时间
      startDate: new Date(), // 时间不能低于当前时间
      slots: [
        {
          flex: 1,
          values: ["已报备", "已签约"],
          className: "slot1",
          textAlign: "center"
        }
      ]
    };
  },
  created() {
    let that = this;
    // this.$nextTick(() => {
    let id = that.$route.query.id;
    //   that.getClientInfo(id);
    //   that.getStatusList(id);
    that.http.all([that.getStatusList(id), that.getHouseList(id)]);
    // });
  },
  watch: {
    houseList(val) {
      return (this.empty = val.length ? false : true);
    }
  },
  filters: {},
  mounted() {
    // let that = this;
    // this.$nextTick(() => {
    //   let id = that.$route.query.id;
    //   //   that.getClientInfo(id);
    //   //   that.getStatusList(id);
    //   that.http.all([
    //     that.getClientInfo(id),
    //     that.getStatusList(id),
    //     that.getHouseList(id)
    //   ]);
    // });
  },
  components: {
    "mt-picker": Picker,
    "mt-datetime-picker": DatetimePicker
  },
  methods: {
    toHouseInfo(code) {
      let that = this;
      this.toRouter("houses_info", {
        houseCode: code,
        userCode: that.clientInfo.clientCode,
        userName: that.clientInfo.clientName
      });
    },
    // 弹出修改看房状态
    setShowPicker(id, i) {
      // 重置状态、ID、时间
      this.lookHouseStatus = 0;
      this.userAndClientCode = id;
      this.pickerValue = 0;

      // 是否需要选择时间
      if (i) {
        this.$refs.picker.open();
      } else {
        this.showPicker = true;
      }
    },

    // 判断是否报备（报备需要加时间）
    reviseLookStatusTime() {
      let that = this;
      if (!this.lookHouseStatus || this.lookHouseStatus === 2) {
        this.$refs.picker.open();
      } else {
        this.pop = true;
      }
    },
    confirmPop(){
      if(this.popNumber){
        this.reviseLookStatus(0, parseInt(this.popNumber));
      } else {
        this.layer("请输入正确成交价");
      }
    },

    // 修改报备状态
    reviseLookStatus(has, num) {
      // this.alert('您确定修改状态')

      this.showPicker = false;
      this.pop = false;
      let lookHouseStatus = this.lookHouseStatus,
        that = this;

      let ops = {
        userAndClientCode: this.userAndClientCode
      };

      if (has) {
        ops["lookTimes"] = this.toDate(this.pickerValue);
        ops["lookHouseStatus"] = this.lookHouseStatus = 2;
      } else {
        ops["lookHouseStatus"] = lookHouseStatus;
        if (num) {
          ops["allPrice"] = num;
        }
      }

      this.http.post("userandclient/update", ops).then(res => {
        that.layer("修改成功");
        that.getStatusList(that.$route.query.id);
        // for (let i = 0; i < that.statusList.length; i++) {
        //   if (
        //     that.statusList[i].userAndClientCode === that.userAndClientCode
        //   ) {
        //     that.getStatusList(that.$route.query.id);
        //     that.statusList[i].lookHouseStatus = this.lookHouseStatus;
        //     break;
        //   }
        // }
      });
    },

    // 得到报备状态
    onValuesChange(it, val) {
      if (val[0] === "已报备") {
        this.lookHouseStatus = 2;
      } else if (val[0] === "已签约") {
        this.lookHouseStatus = 5;
      }
    },

    // 获取客户信息
    getClientInfo(id) {
      let that = this;
      this.http
        .get("client/info/" + id)
        .then(res => {
          that.clientInfo = res.data;
          that.setCache("clientInfo", that.clientInfo);
        })
        .catch(err => {});
    },

    //获取报备列表
    getStatusList(id) {
      let that = this;
      this.http
        .post("userandclient/list", {
          page: 1,
          limit: 100,
          clientCode: id
        })
        .then(res => {
          that.statusList = res.data.list;
          that.statusList.forEach(it => {
            // 将二维码编码转为二维码图片
            QRCode.toDataURL(it.qrCode).then(url => {
              that.$set(it, "qrImg", url);
            });
          });
        })
        .catch(err => {});
    },

    // 获取客户匹配房源
    getHouseList(id) {
      let that = this;
      this.http
        .post("client/matchHouses", {
          clientCode: id
        })
        .then(res => {
          that.getClientInfo(id);
          that.houseList = res.data;
          //  console.log('---------------'+JSON.stringify(res));
        });
    }
  }
};
</script>
